<template >
    <el-form
      ref="pwdRef"
      :model="user"
      :rules="rules"
      label-position="top"
      class="security-form"
    >
          <el-form-item label="旧密码" prop="oldPassword" style="width: 400px;">
            <template #label>
            <span class="form-label">
              <el-icon><Key /></el-icon>
              旧密码
            </span>
            </template>
            <el-input
              v-model="user.oldPassword"
              placeholder="请输入当前使用的密码"
              type="password"
              show-password
              class="password-input"
              clearable
            >
              <template #prefix>
                <el-icon class="input-icon"><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="新密码" prop="newPassword" style="width: 400px;">
            <template #label>
            <span class="form-label">
              <el-icon><Unlock /></el-icon>
              新密码
            </span>
            </template>
            <el-input
              v-model="user.newPassword"
              placeholder="请输入新密码"
              type="password"
              show-password
              class="password-input"
              clearable
            >
              <template #prefix>
                <el-icon class="input-icon"><EditPen /></el-icon>
              </template>
<!--              <template #suffix>-->
<!--                <password-strength :password="user.newPassword" />-->
<!--              </template>-->
            </el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="confirmPassword" style="width: 400px;">
            <template #label>
            <span class="form-label">
              <el-icon><CircleCheck /></el-icon>
              确认密码
            </span>
            </template>
            <el-input
              v-model="user.confirmPassword"
              placeholder="请再次输入新密码"
              type="password"
              show-password
              class="password-input"
            >
              <template #prefix>
                <el-icon class="input-icon"><Refresh /></el-icon>
              </template>
            </el-input>
          </el-form-item>


      <div class="form-actions">
        <el-button
          type="success"
          class="submit-btn"
          @click="submit"
        >
          <el-icon class="btn-icon"><CircleCheck /></el-icon>
          确认
        </el-button>
        <el-button
          type="info"
          class="cancel-btn"
          @click="close"
        >
          <el-icon class="btn-icon"><Close /></el-icon>
          取消
        </el-button>
      </div>
    </el-form>

</template>

<script setup lang="ts">
import { updateUserPwd } from "@/api/system/user";
import type { ResetPwdForm } from "@/api/system/user/types";
import { Checked, CircleCheck, EditPen, Key, Lock, Refresh, Unlock } from "@element-plus/icons-vue";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const pwdRef = ref<ElFormInstance>();
const user = ref<ResetPwdForm>({
  oldPassword: "",
  newPassword: "",
  confirmPassword: ""
});

const equalToPassword = (rule: any, value: string, callback: any) => {
  if (user.value.newPassword !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};
const rules = ref({
  oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
  newPassword: [
    { required: true, message: '新密码不能为空', trigger: 'blur' },
    {
      min: 6,
      max: 20,
      message: '用户密码长度必须介于 6 和 20 之间',
      trigger: 'blur'
    },
    {
      pattern: /^[^<>"'|\\]+$/,
      message: '不能包含非法字符：< > " \' \\ |',
      trigger: 'blur'
    },
    {
      pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[^\da-zA-Z]).+$/,
      message: '密码必须包含字母、数字和特殊符号',
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: "确认密码不能为空", trigger: "blur" },
    {
      required: true,
      validator: equalToPassword,
      trigger: "blur"
    }
  ]
});

/** 提交按钮 */
const submit = () => {
  pwdRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      await updateUserPwd(user.value.oldPassword, user.value.newPassword);
      proxy?.$modal.msgSuccess("修改成功");
    }
  });
};
/** 关闭按钮 */
const close = () => {
  proxy?.$tab.closePage();
};
</script>
<style lang="scss" scoped>
.security-form {
  padding: 30px;
  background: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;

  .form-header {
    text-align: center;
    margin-bottom: 40px;

    .shield-icon {
      font-size: 48px;
      color: var(--el-color-primary);
      padding: 15px;
      background: var(--el-color-primary-light-9);
      border-radius: 50%;
      margin-bottom: 20px;
    }

    .form-title {
      font-size: 22px;
      margin: 10px 0;
      color: var(--el-text-color-primary);
    }

    .form-tip {
      color: var(--el-text-color-secondary);
      font-size: 14px;
      margin: 0;
    }
  }

  .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--el-text-color-primary);

    .el-icon {
      color: var(--el-color-primary);
      font-size: 18px;
    }
  }

  .password-input {
    :deep(.el-input__wrapper) {
      border-radius: 8px;
      transition: all 0.3s;
      padding: 0 15px;
      //background: var(--el-fill-color-light);

      //&:hover {
      //  box-shadow: 0 0 0 1px var(--el-color-primary-light-5) inset;
      //}

      &.is-focus {
        box-shadow: 0 0 0 2px var(--el-color-primary) inset;
        background: var(--el-color-primary-light-9);
      }
    }

    .input-icon {
      color: var(--el-text-color-placeholder);
      margin-right: 8px;
    }
  }

  .form-actions {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px dashed var(--el-border-color);
    display: flex;
    justify-content: flex-start;
    gap: 24px;

    .submit-btn, .cancel-btn {
      padding: 12px 32px;
      border-radius: 8px;
      font-weight: 500;
      letter-spacing: 0.5px;
      transition: all 0.3s;

      .btn-icon {
        margin-right: 8px;
        font-size: 16px;
      }
    }

    .submit-btn {
      background: linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3));
      border: none;
      color: white;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--el-color-primary-light-5);
      }
    }

    .cancel-btn {
      &:hover {
        background-color: var(--el-color-info-light-8);
        color: var(--el-color-info);
      }
    }
  }
}
</style>
